<template>
    <el-button @click="clearFilter">重置所有筛选</el-button>
    <el-table ref="tableRef" :data="tableData" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div m="4" style="margin-left: 60px">
                    <p m="t-0 b-2">投诉描述: {{ props.row.desc }}</p>
                    投诉图片:<img :src="props.row.img_path" style="height: 150px; width: 150px;" :style="props.row.imgVisible">
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="Date" sortable width="180" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="complaintType" label="投诉类型" column-key="complaintType" :formatter="formatter" :filters="[
            { text: '客服态度', value: '客服态度' },
            { text: '平台信息有误', value: '平台信息有误' },
            { text: '景区问题反馈', value: '景区问题反馈' },
        ]" :filter-method="filterType" filter-placement="bottom-end">
        </el-table-column>
        <el-table-column prop="result" label="处理结果" width="180" />
        <el-table-column prop="tag" label="处理状态" width="100">
            <template #default="scope">
                <el-tag type='danger' disable-transitions>{{ scope.row.tag }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="right" prop="isSolved">
            <template #default="scope">
                <el-button size="large" type="primary" :disabled="tableData[scope.$index].isSolved"
                    @click="handleEdit(scope.$index, scope.row)">回复</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-drawer v-model="drawer" title="编辑回复" direction="rtl">
        <el-form label-width="120px">
            <el-form-item label="投诉类型">
                <span>{{ tempType }}</span>
            </el-form-item>
            <el-form-item label="投诉内容">
                <span>{{ tempInfo }}</span>
            </el-form-item>
            <el-form-item label="投诉回复">
                <el-input v-model="tempReply" type="textarea" maxlength="250" show-word-limit
                    :autosize="{ minRows: 4, maxRows: 6 }" />
                <span style="color:red;">{{ tempMsg }}</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" round @click="handleSubmit()">提交回复</el-button>
            </el-form-item>
        </el-form>

    </el-drawer>
</template>
    
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
import { getRequest, postRequestWithRaw } from '../../../api/axiosRequest'
import { ElMessage } from 'element-plus'
interface User {
    isSolved: boolean
    complaintsId: string
    date: string
    username: string
    complaintType: string
    tag: string
    desc: string
    result: string
    img_path: string
    imgVisible: string
}

const drawer = ref(false);
const tempType = ref('');
const tempInfo = ref('');
const tempId = ref('');
const tempReply = ref('');
const tempMsg = ref('');

//初始化用户个人处理记录
onMounted(() => {
    getAllUnsolved();
});

const tableRef = ref<TableInstance>()

// TODO: improvement typing when refactor table
//清除筛选列表
const clearFilter = () => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    tableRef.value!.clearFilter()
}

//格式化输出
const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.complaintType
}

//投诉类型筛选函数
const filterType = (value: string, row: User) => {
    return row.complaintType === value
}

//点击回复处理按钮
const handleEdit = (index: string, row: User) => {
    tempId.value = row.complaintsId;
    tempInfo.value = row.desc;
    tempType.value = row.complaintType;
    drawer.value = true;
    console.log(index + " " + row);
}

//表格数据
const tableData = ref([
    {
        isSolved: false,
        complaintsId: '1',
        date: '2016-05-03',
        username: 'Tom',
        complaintType: '客服态度',
        tag: '未处理',
        desc: '哒哒哒哒哒哒哒哒哒',
        result: '暂无处理结果',
        img_path: '',
        imgVisible: '',
    },
])

const handleSubmit = async () => {
    if (tempReply.value === '' || tempReply.value === null) {
        tempMsg.value = '请填写回复!'
    } else {
        console.log('请求后端...');
        const result = await postRequestWithRaw('/complaints/replyComplaint', {
            complaintId: tempId.value,
            result: tempReply.value
        });
        console.log(result);

        if (result.status === 200) {
            if (result.data.status === 1) {
                ElMessage({
                    type: 'success',
                    message: result.data.msg,
                })
            } else {
                ElMessage({
                    type: 'success',
                    message: result.data.msg,
                })
                console.log('NetWork Error!');
            }
        }
        getAllUnsolved();
        drawer.value = false;
    }
}

const getAllUnsolved = () => {
    tableData.value = [];
    getRequest('/complaints/getAllUnsolvedComplaint', null)
        .then((response) => {
            if (response.status === 200) {
                return response.data;
            } else {
                console.log('NetWork Error!');
            }
        }).then((data) => {
            const tempArr = data.data;
            for (let i = 0; i < tempArr.length; i++) {
                let tempImgVisible = 'display:block'
                if (tempArr[i].imgPath === '') {
                    console.log('Into if');
                    tempImgVisible = 'display:none'
                }
                tableData.value[i] = {
                    isSolved: false,
                    complaintsId: tempArr[i].complaintId,
                    date: tempArr[i].date,
                    username: tempArr[i].username,
                    complaintType: tempArr[i].type,
                    tag: '未处理',
                    desc: tempArr[i].description,
                    result: '暂无处理结果',
                    img_path: tempArr[i].imgPath,
                    imgVisible: tempImgVisible
                }
            }
        });
}
</script>